<template>
  <div @dblclick="toggleScreen" ref="mapbox">
    <dataScreen></dataScreen>
  </div>
</template>

<script>
import dataScreen from '../show/index.vue'
export default {
  components: { dataScreen },
  data() {
    return {
      blnFullScreen: false,
    };
  },

  mounted() {

  },

  methods: {
    toggleScreen() {
      if (this.isFullScreen()) {
        this.blnFullScreen = false;
        this.exitFullscreen();
      } else {
        this.blnFullScreen = true;
        this.openFullscreen();
      }
    },

    isFullScreen() {
      return !!(document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen || document.webkitFullScreen || document.msFullScreen);
    },

    openFullscreen() {
      /* 获取(<html>)元素以全屏显示页面 */
      const full = this.$refs.mapbox;
      if (full.RequestFullScreen) {
        full.RequestFullScreen();
        //兼容Firefox
      } else if (full.mozRequestFullScreen) {
        full.mozRequestFullScreen();
        //兼容Chrome, Safari and Opera等
      } else if (full.webkitRequestFullScreen) {
        full.webkitRequestFullScreen();
        //兼容IE/Edge
      } else if (full.msRequestFullscreen) {
        full.msRequestFullscreen();
      }
    },
    exitFullscreen() {
      const element = this.$refs.mapbox;
      if (document.exitFullScreen) {
        document.exitFullScreen();
        //兼容Firefox
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
        //兼容Chrome, Safari and Opera等
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
        //兼容IE/Edge
      } else if (element.msExitFullscreen) {
        element.msExitFullscreen();
      }
    },
  },
};
</script>

<style scoped>
::v-deep #dv-full-screen-container {
  width: 100% !important;
  height: 100% !important;
  position: relative;
}
</style>